<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
        *{
            margin:0;
            padding:0;
        }
        body{
            font-family:Microsoft YaHei;
        }
        li{list-style:none;}
        div{
            width:400px;
            background-color:#61a1bc;
            margin:50px auto;
            padding:35px 60px;
        }
        h1{
            font-size:44px;
            text-align:center;
        }
        ul{
            font-size:20px;
            text-align:left;
            margin:20px 0 15px;
        }
        ul li{
            padding:20px 30px;
            background-color:#e35885;
            margin-bottom:8px;
            cursor:pointer;
        }
        ul li span{float:right;}
        ul li.active{
            background-color:#8ec16d;
        }
        p{
            border-top:1px solid rgba(255,255,255,0.5);
            padding:15px 30px;
            font-size:20px;
            text-align: left;
        }
        p span{float:right;}
    </style>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
</head>
<body>
<div id="main" v-cloak>
    <h1>Services</h1>
    <ul>
        <li v-for="item in items" @click="toggleActive(item)" :class="{'active':item.active}">
            {{item.name}}<span>{{item.price }}</span>
        </li>
    </ul>
    <p>Total: <span>{{totle()}}</span></p>
</div>
</body>
<script>
    var demo = new Vue({
        el: '#main',
        data: {
            items: [
                {
                    name: 'Web Development',
                    price: 300,
                    active: false
                }, {
                    name: 'Design',
                    price: 400,
                    active: false
                }, {
                    name: 'Integration',
                    price: 250,
                    active: false
                }, {
                    name: 'Training',
                    price: 220,
                    active: false
                }
            ]
        },
        methods :{
            toggleActive : function (item) {
                item.active = !item.active;
            },
            totle : function () {
                var totle = 0;
                this.items.forEach(function(item){
                    if(item.active){
                        totle = totle + item.price;
                    }
                });
                return totle;
            }
        }
    });
</script>
</html>